<template>
  <div class="homePage">
    <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

    <!-- 搜索栏红板块 -->
    <div class="searchNavi">
      <img src="@/assets/logo1.png" alt class="avatar" />

      <div class="search" @click="$router.push('/search')">
        <div class="iconfont iconsousuo-"></div>
        <span>搜索新闻</span>
      </div>

      <div class="iconfont iconwode1" @click="goPersonal"></div>
    </div>

    <!-- Tab 标签页 -->
    <div class="tab">
      <van-tabs v-model="active" sticky swipeable>
        <van-tab :title="category.name" v-for="category in categoryLists" :key="category.id">
          <van-list
            v-model="category.loading"
            :finished="category.finished"
            finished-text="我也是有底线的~~~"
            @load="loadMorePost"
            :immediate-check="false"
          >
            <!-- 文章列表 -->
            <posts :post="post" v-for="post in category.postList" :key="post.id" />
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import posts from "@/components/Posts";

export default {
  data() {
    return {
      active: 0,
      categoryLists: []
    };
  },

  mounted() {
    const unableHtml = localStorage.getItem("unable");

    if (unableHtml) {
      const res = {
        data: {
          data: JSON.parse(unableHtml)
        }
      };
      console.log("浏览器存储的栏目结果", res.data.data);

      const newData = res.data.data.map(item => {
        return {
          ...item,
          postList: [],
          pageIndex: 1,
          pageSize: 5,
          loading: false,
          finished: false
        };
      });

      this.categoryLists = newData;

      console.log("新数组", this.categoryLists);

      this.loadPost();
    } else {
      this.$axios({
        url: "/category"
      }).then(res => {
        // console.log(res.data.data);
        // this.categoryLists = res.data.data;
        // console.log('所有数据',this.categoryLists);

        const newData = res.data.data.map(item => {
          return {
            ...item,
            postList: [],
            pageIndex: 1,
            pageSize: 5,
            loading: false,
            finished: false
          };
        });

        this.categoryLists = newData;

        console.log("新数组", this.categoryLists);

        this.loadPost();
      });
    }
  },

  watch: {
    active() {
      // this.loadPost();

      // 实现切换tab时，已选择的不再重复发送请求
      const currentCategory = this.categoryLists[this.active];

      if (currentCategory.postList == 0) {
        this.loadPost();
      }
    }
  },

  methods: {
    loadMorePost() {
      console.log("加载下一页");

      const currentCategory = this.categoryLists[this.active];
      currentCategory.pageIndex += 1;

      this.loadPost();
    },

    loadPost() {
      const currentCategory = this.categoryLists[this.active];

      const CategoryId = currentCategory.id;

      this.$axios({
        url: "/post",
        params: {
          category: CategoryId,
          pageIndex: currentCategory.pageIndex,
          pageSize: currentCategory.pageSize
        }
      }).then(res => {
        console.log(res.data.data);
        // this.postLists = res.data.data;

        // 获取文章数据后，不应该放在公共文章列表数据中，各放各的postList里
        // currentCategory.postList = res.data.data;

        currentCategory.postList = [
          ...currentCategory.postList,
          ...res.data.data
        ];

        // 加载状态结束
        currentCategory.loading = false;

        // console.log("111",res.data.data);
        // console.log("222",res.data.data.length);
        // console.log("333",currentCategory.pageSize);

        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },

    goPersonal() {
      if (localStorage.getItem("userToken")) {
        this.$router.push("/personal");
      } else {
        this.$toast.fail("请你先登录！");

        this.$router.replace("/login");
      }
    }
  },
  components: {
    posts
  }
};
</script>

<style lang="less" scoped>
.homePage {
  .phoneTop {
    width: 100%;
  }

  .searchNavi {
    display: flex;
    align-items: center;
    height: 16.111vw;
    background-color: #fd4a68;

    .avatar {
      width: 8.333vw;
      height: 8.333vw;
      object-fit: cover;
      padding: 0 5.556vw;
    }

    .search {
      display: flex;
      flex: 1;
      background-color: rgba(255, 255, 255, 0.3);
      color: #fff;
      width: 11.111vw;
      line-height: 11.111vw;
      justify-content: center;
      border-radius: 5.556vw;
      margin-right: 2.778vw;

      span {
        padding-left: 1.111vw;
        font-size: 3.889vw;
      }
    }

    .iconwode1 {
      color: rgba(255, 255, 255, 0.6);
      font-size: 7.222vw;
      padding: 0 5.556vw;
    }
  }
}
</style>